<template>
  <el-dialog :title="state=='unbound' ? '解绑当前手机号' :'绑定新手机号'" :visible.sync="dialogChangePhoneVisible"
             @close="closeChangePhoneDialog" :close-on-click-modal="false">
<!--   提示框-->
    <div class="step-title">
      <div class="unbound" :class="{nextUnbound: state=='binding'}">解绑当前手机号</div>
      <div class="binding" :class="{nextBinding :state=='binding'}">绑定新手机号</div>
    </div>

<!--    解绑旧手机-->
    <el-form :model="oldPhoneForm" v-if="state=='unbound'">
      <el-form-item >
        <el-input v-model="oldPhone" autocomplete="off" disabled></el-input>
      </el-form-item>
      <el-form-item class="input-code">
        <el-input v-model="oldPhoneForm.verificationCode" autocomplete="off" placeholder="请输入手机验证码"></el-input>
        <span class="code" @click="getCode" v-if="canGetCode">获取验证码</span>
        <span class="count-down" v-else>{{count}}秒后可重新发送验证码</span>
        <span v-if="codeError!=''" class="error-code">{{codeError}}</span>
      </el-form-item>
      <el-button type="primary"  :disabled="nextDisabled" @click="goNext">下一步</el-button>
    </el-form>

<!--    绑定新手机-->
    <el-form :model="newPhoneForm" v-if="state=='binding'" >
      <el-form-item >
        <el-input v-model="newPhoneForm.newPhone" autocomplete="off" placeholder="请输入需要绑定的新手机号"></el-input>
        <span v-if="newPhoneError!=''" class="error-code">{{newPhoneError}}</span>
      </el-form-item>
      <el-form-item class="input-code">
        <el-input v-model="newPhoneForm.newVerification" autocomplete="off" placeholder="请输入手机验证码"></el-input>
        <span class="code" @click="getCode" v-if="canGetCode">获取验证码</span>
        <span class="count-down" v-else>{{count}}秒后可重新发送验证码</span>
        <span v-if="codeError!=''" class="error-code">{{codeError}}</span>
      </el-form-item>
      <el-button type="primary"  :disabled="nextDisabled" @click="bindingPhone">绑定手机</el-button>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: "ChangePhoneDialog",
  props:{
    oldPhone:'',  //旧手机号
    dialogChangePhoneVisible:false,  //修改手机号码的dialog
  },
  data(){
    return {
      state: 'unbound',  //现在处在哪个状态， unbound(解绑)  binding(绑定阶段)
      nextDisabled:true, //下一步的状态
      canGetCode: true, //是否可以点击获取验证码
      count:60,  //倒计时时间
      codeError: '',  //验证码错误的信息
      newPhoneError:'',  //手机号码错误的信息
      oldPhoneForm:{   //旧手机的信息
        verificationCode: ''  //验证码
      },
      newPhoneForm:{ //新手机的信息
        newPhone:'',  //新手机号
        newVerification:''   //新手机验证码
      },
      myInterval: null,  //设置倒计时的定时器
      phoneReg: /^1(?:3\d|4[4-9]|5[0-35-9]|6[67]|7[013-8]|8\d|9\d)\d{8}$/   //手机正则表达式

    }
  },
  methods:{

    clearSome(){
      clearInterval(this.myInterval); //清空定时器
      this.myInterval = null;
      this.count=60;  //将倒计时设为60
      this.canGetCode=true;
    },
    closeChangePhoneDialog(){  //关闭修改手机号码dialog
      this.clearSome();
      this.state = 'unbound';
      this.codeError='';
      this.nextDisabled = true;
      this.oldPhoneForm.verificationCode = '';
      this.newPhoneForm.newPhone = '';   //清空新手机的信息
      this.newPhoneForm.newVerification = '';
      this.newPhoneError = '';
      this.$emit("closeChangePhoneDialog");
    },
    getCode(){  //获取验证码
      //绑定新手机时
      if(this.state=='binding'){
        if(this.newPhoneForm.newPhone.trim()==''){
          this.newPhoneError = '手机号码不能为空';
          this.$message({
            message:'手机号码不能为空',
            type: 'error'
          })
          return;
        }
        if(!this.phoneReg.test(this.newPhoneForm.newPhone)) {
          this.newPhoneError = '手机号码格式错误';
          this.$message({
            message: '手机号码格式错误',
            type: 'error'
          })
          return;
        }
      }
      this.newPhoneError='';
      this.canGetCode = false;
      this.nextDisabled = false;
      //进行倒计时
      clearInterval(this.myInterval);  //先清空定时器
      this.myInterval = setInterval(()=>{
        this.count--;
        if(this.count==0){  //定时到最后一秒
          this.clearSome();
        }
      },1000)
    },
    goNext() {  //点击 下一步 的操作
      if(this.oldPhoneForm.verificationCode.trim()==''){
        this.codeError = '验证码不能为空';
        this.$message({
          message: '手机验证码验证失败',
          type:'error',
        })
        return;
      }
      // 进行验证码的校验

      //验证成功后
      this.state = 'binding'; //将状态设置成 绑定新手机
      this.codeError = ''; //将错误信息请空
      this.clearSome();
      this.nextDisabled =true;
    },
    bindingPhone(){   //绑定新手机号码
      if(this.newPhoneForm.newPhone.trim()==''){
        this.newPhoneError = '手机号码不能为空';
        this.$message({
          message:'手机号码不能为空',
          type: 'error'
        })
        return;
      }
      if(!this.phoneReg.test(this.newPhoneForm.newPhone)) {
        this.newPhoneError = '手机号码格式错误';
        this.$message({
          message: '手机号码格式错误',
          type: 'error'
        })
        return;
      }
      if(this.newPhoneForm.newVerification.trim()==''){
        this.codeError = '验证码不能为空';
        this.$message({
          message: '手机验证码验证失败',
          type:'error',
        })
        return;
      }

      //提交新手机号

    }
  }
}
</script>

<style scoped>
  .step-title{
    display:flex;
    height: 36px;
    margin-bottom: 30px;
    line-height: 36px;
    text-align: center;
  }
  /*解绑号码时的样式*/
  .step-title .unbound{
    flex:1;
    background-color: #0A84FF;
    color:white;
    position:relative;
  }
  .step-title .unbound::after{
    content:'';
    display:block;
    border-width: 18px 0 18px 18px;
    border-style: solid;
    position: absolute;
    top:0;
    right:-18px;
    border-color: transparent transparent transparent #0A84FF;
    background-color: transparent;
  }
  .step-title .binding{
    flex:1;
    color:#0A84FF;
    /*background-color: #0A84FF;*/
    background-color: #CEE6FF;
  }
  /*绑定新手机时的样式*/
  .step-title .nextUnbound{
    background-color: #CEE6FF;
    color:#0A84FF;
  }
  .step-title .nextUnbound::after{
    border-color: transparent transparent transparent #CEE6FF;
  }
  .step-title .nextBinding{
    background-color: #0A84FF;
    color:white;
  }
  .input-code{
    position:relative;
  }
  .code{
    color: #0A84FF;
    position: absolute;
    top:0;
    right: 15px;
    cursor: pointer;
  }
  .code:hover{
    color: rgb(7.5,105.349,204);
  }
  .count-down{
    position: absolute;
    top:0;
    right: 15px;
  }
  .error-code{
    font-size: 12px;
    color:red;
  }
  .el-button{
    width: 100%;
  }

</style>
